<template>
	<div class="wrap">
		 <h3>我的订单</h3>
		 <div class="top">
		 	<button>全部</button>
		 	<span v-for="item in arr">{{item}}</span>
		 	<a href="###">订单回收站</a>
		 </div>
		 <div class="order" v-for="(order,index) in orderinformation">
		 	<div class="header">
		 		<span v-for="order in order.orderstatus">{{order.name}}<i>{{order.num}}</i></span>			
		 	</div>
		 	<div class="ordercont">
		 		<div class="goods">
		 			<div v-for="item in order.goodsarr">
		 				<img :src="item.src"/>
		 				<span>{{item.name}}</span>
		 				<span>{{item.num}}</span>
		 				<span>{{item.price}}</span>
		 			</div>		
		 		</div>
		 		<div class="totalprice">
		 			<span>店铺合计:¥{{order.totalprice[0]}}</span>
		 			<span>(含运费:¥{{order.totalprice[1]}})</span>
		 		</div>
		 		<div class="operation">
		 			<a href="javascript:void(0);">查看详情</a>
		 			<button v-for="operation in order.status" @click="goto(index)">{{operation}}</button>
		 		</div>
		 	 </div>
		 	</div>
		 	<div class="pager">
		 		<span><</span>
		 		<span v-for="pagenum in numarr">{{pagenum}}</span>	
		 	    <span>></span>
		 	    <input type="text" />
		 	    <span>/10</span>
		 	    <button>跳转</button>
		 	</div>
		 </div>
	</div>
</template>

<script>
	export default{
		name:"myorder",
		data(){
			return{
				arr:["待付款","待发货","待收货","待评价","退款/售后","已完成/关闭"],
				orderinformation:[{orderstatus:[{name:"订单号:", num:"150319690000"},{name:"下单日期:", num:"2018.04.09 18:06:06"},{name:"爱果果水果店", num:""},{name:"订单状态:", num:"关闭"}],
				goodsarr:[{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"},{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"}],
				totalprice:[105.0,8.0],
				status:["删除订单"]},{orderstatus:[{name:"订单号:", num:"150319690000"},{name:"下单日期:", num:"2018.04.09 18:06:06"},{name:"爱果果水果店", num:""},{name:"订单状态:", num:"待付款"}],
				goodsarr:[{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"},{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"}],
				totalprice:[105.0,8.0],
				status:["去支付","取消订单"]},{orderstatus:[{name:"订单号:", num:"150319690000"},{name:"下单日期:", num:"2018.04.09 18:06:06"},{name:"爱果果水果店", num:""},{name:"订单状态:", num:"待发货"}],
				goodsarr:[{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"},{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"}],
				totalprice:[105.0,8.0],
				status:["申请退款"]},{orderstatus:[{name:"订单号:", num:"150319690000"},{name:"下单日期:", num:"2018.04.09 18:06:06"},{name:"爱果果水果店", num:""},{name:"订单状态:", num:"已发货"}],
				goodsarr:[{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"},{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"}],
				totalprice:[105.0,8.0],
				status:["确认收货","查看物流"]},{orderstatus:[{name:"订单号:", num:"150319690000"},{name:"下单日期:", num:"2018.04.09 18:06:06"},{name:"爱果果水果店", num:""},{name:"订单状态:", num:"已收货"}],
				goodsarr:[{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"},{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"}],
				totalprice:[105.0,8.0],
				status:["申请退款","交易完成"]},{orderstatus:[{name:"订单号:", num:"150319690000"},{name:"下单日期:", num:"2018.04.09 18:06:06"},{name:"爱果果水果店", num:""},{name:"订单状态:", num:"申请退款中"}],
				goodsarr:[{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"},{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"}],
				totalprice:[105.0,8.0],
				status:["删除订单"]},{orderstatus:[{name:"订单号:", num:"150319690000"},{name:"下单日期:", num:"2018.04.09 18:06:06"},{name:"爱果果水果店", num:""},{name:"订单状态:", num:"退款中"}],
				goodsarr:[{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"},{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"}],
				totalprice:[105.0,8.0],
				status:["删除订单"]},{orderstatus:[{name:"订单号:", num:"150319690000"},{name:"下单日期:", num:"2018.04.09 18:06:06"},{name:"爱果果水果店", num:""},{name:"订单状态:", num:"退款失败"}],
				goodsarr:[{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"},{src:require("../../assets/image/goods.png"),name:"云南邵通丑苹果",num:"6个装",price:"¥35.0*1"}],
				totalprice:[105.0,8.0],
				status:["申请平台介入"]}],
				numarr:[1,2,3,4,"...",10]				
			}
		},
		methods:{
			goto:function(index){
//				console.log(this.orderinformation[index].status.indexOf("去支付"));
				var a = this.orderinformation[index].status.indexOf("删除订单");
				var b = this.orderinformation[index].status.indexOf("去支付");
				if(a == 0 || a > 0){
					this.orderinformation.splice(index,1);
				}else if(b == 0 || b > 0){
					window.location.href= "#/myshopCar";
				}
			}
		}
	}
</script>

<style scoped>
   .wrap{
    	    width: 1085px;
    	    border: 1px solid rgb(242,242,242);
    }
    /*标题*/
    h3{    	    
		font-weight: 200;
		font-size: 18px;
		color: rgb(75,75,75);
		text-indent: 21px;
		line-height: 58px;
		border-bottom: 1px solid rgb(242,242,242);	
    }
    /*顶部导航*/
    .top{
     	width: 1041px;
     	line-height: 70px;
     	margin: 0 21px;
     	font-size: 16px;
     	 	 
    }
    .top>button{
    	    background-color: rgb(247,131,39);
    	    color: white;
    	    border: none;
    	    font-size: 16px;
    	    display: inline-block;
    	    font-weight:100;
    	    width: 60px;
    	    margin-right: 25px;
    }
    .top>span{
    	    line-height: 16px;
    	    color: rgb(145,145,145); 
    	    border-left:1px solid rgb(187,187,187);
    	    display: inline-block; 
    	    text-align: center;
    }
    .top>span:nth-of-type(n+1):nth-of-type(-n+4){
    	    width: 126px;
    }
    .top>span:nth-of-type(5){
    	    width: 150px;
    }
    .top>span:nth-of-type(6){
    	    width: 166px;
    }
    .top>a{
    	  color:rgb(141,202,48);
    	  text-decoration: underline;
    	  padding-left: 38px;
    }
    /*订单内容*/
   .order{
   	  width: 1040px;
   	  height: 290px;
   	  margin:0 auto 21px ;
   	  border: 1px solid rgb(242,242,242);
   	  font-size: 0;
   }
   .header{
   	width: 100%;
   	line-height: 47px;
   	background-color: rgb(242,242,242);
   	font-size: 16px;
   }
   .header>span{
   	  color: rgb(101,101,101);
   }
   .header i{
   	  font-style: normal;
   }
   .header>span:nth-child(1){
   	  padding-left: 21px;
   }
   .header>span:nth-child(2){
   	  padding-left: 50px;
   }
   .header>span:nth-child(3){
   	  color:rgb(141,202,48);
   	  padding-left: 53px;
   }
   .header>span:nth-child(4){
   	  padding-left: 290px;
   }
   .header>span:nth-child(4)>i{
   	  color:rgb(246,133,41);
   }
   .goods{
   	  display: inline-block;
   	  vertical-align: top;
   	  width: 690px;
   	  height: 242px;
   	  font-size: 14px;
   }
   .goods>div:nth-child(1){
   	  height: 120px;
   	  border-bottom: 1px solid rgb(233,233,233);
   }
   .goods img{
   	  padding: 21px 0 0 21px;
   }
   .goods span{
   	  vertical-align: 35px;
   }
   .goods span:nth-of-type(1){
   	  color:rgb(112,112,112);
   	  padding-left: 21px;
   }
   .goods span:nth-of-type(2){
   	  color:rgb(166,166,166);
   	  padding-left: 150px;
   }
   .goods span:nth-of-type(3){
   	  color:rgb(133,133,133);
   	  padding-left: 110px;
   }
   .totalprice{
   	  display: inline-block;
   	  vertical-align: top;
   	  width: 208px;
   	  height: 242px;
   	  border-left: 1px solid rgb(233,233,233);
   	  font-size: 16px;
   	  text-align: center;
   }
   .totalprice>span{
   	  display: inline-block;
   	  width: 100%;
   	  line-height: 30px;
   	  color: rgb(133,133,133);
   }
   .totalprice>span:nth-child(1){
   	  padding-top: 91px;
   }
   .operation{
   	  display: inline-block;
   	  width: 138px;
   	  height: 242px;
   	  border-left: 1px solid rgb(233,233,233);
   	  font-size: 16px;
   	  text-align: center;
   }
   .operation>a{
   	   display: inline-block;
   	   width: 100%;
   	   color: rgb(141,202,48);
   	   text-decoration: underline;
   	   padding: 75px 0 20px;
   }
   .operation>button{
   	   display: inline-block;
   	   min-width: 90px;
       height: 30px;
   	   color: white;
   	   font-size: 16px;
   	   border: none;
   	   border-radius: 5px;
   	   background-color: rgb(247,131,39);
   	   margin-bottom: 10px;
   }
   .pager{
   	  width: 825px;
   	  height: 32px;
   	  margin: 30px auto 40px;
   	  font-size: 0;
   }
   .pager>span{
   	  display: inline-block;
   	  width: 50px;
   	  line-height: 32px;
   	  text-align: center;
   	  font-size: 16px;
   	 
   }
   .pager>input{
   	  display: inline-block;
   	  width: 50px;
   	  height: 26px;
   	  vertical-align: top;
   	  margin-left: 28px;
   }
   .pager>span:nth-of-type(1){
   	  background-color: rgb(221,221,221);
   	  color: white;
   }
   .pager>span:nth-of-type(8){
   	  background-color: rgb(221,221,221);
   	  margin-left: 10px;
   	  color: white;
   }
   .pager>span:nth-of-type(n+2):nth-of-type(-n+7){
   	  margin-left:30px ;
   	  color: rgb(102,102,102);
   }
   .pager>button{
   	  font-size: 16px;
   	  border: none;
   	  display: inline-block;
   	  width: 50px;
   	  height: 32px;
   	  background-color: rgb(247,131,39);
   	  color: white;
   }
</style>